<!-- 积分活动模板 -->
<template>
  <view class="container uno-w-[100%] uno-bg-white" @click="tagHandler">
    <view>
      <up-image class="cateImage" :show-loading="true" :src="modelValue.picUrl" width="100%" height="340rpx" style="margin-left: 10rpx;margin-right: 10rpx"></up-image>
    </view>
    <view class="middle">
      <up-text :text="modelValue.name" bold lines="1"  ></up-text>
      <view class="uno-flex uno-flex-wrap"  style="margin-left: 20rpx;">
        <up-tag :text="item" plain size="mini"
                v-bind="tagStyle(index)"
                v-for="(item,index) in tagList"
                :key="index"
                class="uno-mr1"
        ></up-tag>
      </view>

      <view class="priceBox">
<!--        <text class="first" style="margin-left: 20rpx;">{{  fen2yuan(modelValue.price || '' )}}元+</text>-->
        <text class="second" style="margin-left: 20rpx;">{{ modelValue.points || '' }}积分</text>
      </view>

      <view class="bottom" style="margin-left: 20rpx;">
        <text class="first" color="#888">￥{{ fen2yuan(modelValue.marketPrice || '' )}}</text>
        <text class="second">兑换热度{{ modelValue.heat ?( modelValue.heat / 10000  ).toFixed(1) : '10' }}万+</text>
      </view>
      <!--      <up-text :block="false" :text="modelValue.price||''"></up-text>+ <up-text :block="false" :text="modelValue.useCredits||''"></up-text>-->
    </view>
  </view>
</template>
<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  import { fen2yuan } from '@/sheep/hooks/useGoods';

  const props = defineProps({
    modelValue: {
      type: Object,
      default() {
      },
    },
    show: {
      type: Boolean,
      default: false,
    },
  });
  const emit = defineEmits(['click']);

  function tagHandler() {
    emit('click',props.modelValue);
  }
  const tagTemp = [
    {
      bgColor: 'rgb(0, 0, 0)',
      color: 'rgb(255, 232, 178)',
      borderColor: 'rgb(0, 0, 0)',
    },
    {
      bgColor: 'red',
      color: 'white',
      borderColor: 'red',
    },
    {

      bgColor: '#1daa8e',
      color: 'white',
      borderColor: '#1daa8e',
    },
  ];
  const tagStyle = (index) => {
    const zindex = index % tagTemp.length;
    return tagTemp[zindex];
  };

  const tagList = computed(() => {
    const tag = props.modelValue.productLabel?.split(',');
    return tag;
  });
</script>
<style lang="scss" scoped>
  .container {
    border-radius: 20rpx;
    .middle {
      min-height: 200rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .priceBox {
        color: #f80519;

        .second {
          font-size: 40rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;

        .first {
          text-decoration: line-through;
          font-size: 25rpx;
        }

        .second {
          color: #f80519;
          font-size: 20rpx;
        }
      }
    }

    .cateImage {
      :deep(.u-image) {
        .u-image__image {
          border-radius: 20rpx 20rpx 0 0 !important;

        }
      }
    }
  }
</style>
